<template>
  <div>
    <van-popup v-model="showArea" position="bottom" get-container="body" round>
      <div class="area_pop">
        <div class="title rel">
          {{ $t('page.doc41') }}
          <div class="abs" @click="showArea = false">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="so db">
          <div class="ico"></div>
          <div class="flexs">
            <input
              type="text"
              :placeholder="$t('page.doc42')"
              v-model="soAreaId"
            />
          </div>
          <div class="closes" v-if="soAreaId" @click="soAreaId = ''">
            <img src="@/assets/images/ico_close.png" alt="" />
          </div>
        </div>
        <ul>
          <li
            class="db"
            v-for="(item, k) in searchResult"
            :key="k"
            @click="area_set(item.mobilePrefix)"
          >
            <div class="ico">
              <img :src="item.iconUrl" alt="" />
            </div>
            <div class="flexs txt">
              {{ item.name }}（+{{ item.mobilePrefix }}）
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean,
    areaId: [Number, String],
  },
  data() {
    return {
      soAreaId: '',
      areaData: [],
    };
  },
  activated() {
    this.getArea();
  },
  methods: {
    area_set(id) {
      this.areaCode = id;
      this.showArea = false;
    },
    getArea() {
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
          if (localStorage.getItem('areaId') != null) {
            this.areaCode = localStorage.getItem('areaId');
          } else {
            this.areaCode = res.data[0].mobilePrefix;
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
  computed: {
    searchResult() {
      if (this.soAreaId) {
        return this.areaData.filter(
          (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        );
      } else {
        return this.areaData;
      }
    },
    showArea: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
    areaCode: {
      get() {
        return this.areaId;
      },
      set(value) {
        this.$emit('update:areaId', value);
      },
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-popup {
  margin-left: -0.4rem;
}
.area_pop {
  color: #FFF;
  .title {
    font-size: 0.32rem;
    text-align: center;
    padding: 0.3rem;

    .abs {
      right: 0.3rem;
      top: 0.35rem;

      i {
        font-size: 0.32rem;
      }
    }
  }

  .tip {
    padding: 0.2rem 0.3rem;
    border-top: 0.02rem solid #eee;
    display: none;
  }

  .so {
    height: 0.8rem;
    background: #15181f;
    margin: 0 0.3rem;
    border-radius: 0.12rem;
    padding: 0 0.1rem;

    .ico {
      background: url('../../assets/images/ico_so.png') no-repeat center center;
      width: 0.5rem;
      height: 0.8rem;
      background-size: 0.3rem auto;
    }

    .flexs {
      margin-left: 0.16rem;
    }

    input {
      width: 100%;
      background: none;
      border: 0;

      &::placeholder {
        color: #909090;
      }
    }

    .closes {
      margin-right: 0.1rem;

      img {
        height: 0.32rem;
      }
    }
  }

  ul {
    height: 7rem;
    overflow: auto;
    margin: .2rem 0.3rem ;

    li {
      border-bottom: 0.02rem solid rgba(255, 255, 255, 0.10);
      padding: 0.28rem 0;
      &:last-child {
        border-bottom: none;
      }

      .ico {
        margin-right: 0.2rem;

        img {
          height: 0.32rem;
        }
      }
    }
  }
}
</style>
